<!-- 复制按钮 -->
<template>
  <el-tooltip content="复制" effect="light" placement="right">
    <el-icon>
      <DocumentCopy
        :data-clipboard-text="props.value"
        :id="'copy-btn' + props.index"
      />
    </el-icon>
  </el-tooltip>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
import { DocumentCopy } from "@element-plus/icons-vue";
import Clipboard from "clipboard";
import { ElMessage } from "element-plus";

const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  index: {
    type: String,
    default: "",
  },
});
const clipboard = new Clipboard("#copy-btn" + props.index);
clipboard.on("success", (e: any) => {
  ElMessage.success("复制成功！");
  e.clearSelection(); //清除选择状态
});
clipboard.on("error", (e: any) => {
  ElMessage.error("复制失败！");
});
</script>

<style scoped>
.copy-btn:hover {
  color: #409eff;
}
</style>
